<template>
	<!-- 首页主容器 -->
	<view class="index-container">
		<!-- 顶部背景图 -->
		<image class="page-head-image" :src="topImage" mode="widthFix"></image>
		<view class="page-head" :style="topStyle">
			<!-- 顶部导航栏 -->
			<JNavBar :bgImage="false" :sticky="false"></JNavBar>
			<view class="page-head-inner">
				<view class="JSelectStore-wrap">
					<JSelectStore class="bor1"></JSelectStore>
				</view>
				<view class="JSearch-wrap">
					<JSearch disabled placeholder="搜索商品" @searchClick="handleSearchClick" />
				</view>
			</view>
		</view>
		<!-- 轮播图组件 -->
		<JSwiper :list="swiperList"></JSwiper>

		<!-- 轮播网格组件（商品分类） -->
		<JSwiperGrid :list="swiperGridList"></JSwiperGrid>

		<!-- 活动列表组件 -->
		<JActivity :list="activityList"></JActivity>

		<!-- 商品筛选和列表容器 -->
		<view class="goods-section">
			<JGoodsFilter></JGoodsFilter>
			<!-- 瀑布流商品列表 -->
			<JGoodsArr :goodsList="goodsList" @goodsClick="handleGoodsClick" />
		</view>
	</view>
</template>

<script>
import { waterfallGoodsList } from '@/components/JGoodsArr/example-data.js';

/**
 * 首页组件
 * 包含导航栏、搜索、轮播图、商品分类网格、活动列表等功能模块
 */
export default {
	data() {
		return {
			// 轮播图数据列表
			swiperList: [
				{
					id: 1,
					image: 'https://picsum.photos/750/300?random=1',
					title: '新鲜蔬菜特惠',
					link: '/pages/category/category'
				},
				{
					id: 2,
					image: 'https://picsum.photos/750/300?random=2',
					title: '肉类专场',
					link: '/pages/category/category'
				},
				{
					id: 3,
					image: 'https://picsum.photos/750/300?random=3',
					title: '水果精选',
					link: '/pages/category/category'
				},
				{
					id: 4,
					image: 'https://picsum.photos/750/300?random=4',
					title: '海鲜水产',
					link: '/pages/category/category'
				},
				{
					id: 5,
					image: 'https://picsum.photos/750/300?random=5',
					title: '粮油调味',
					link: '/pages/category/category'
				}
			],
			// 轮播网格数据列表（商品分类）
			swiperGridList: [
				{
					id: 1,
					name: '新鲜蔬菜',
					icon: 'https://xianlian.e88u.com/Upload/11/ad/20250912161139_3540.png',
					link: '/pages/category/category'
				},
				{
					id: 2,
					name: '肉类禽蛋',
					icon: 'https://xianlian.e88u.com/Upload/11/ad/20250912161139_3540.png',
					link: '/pages/category/category'
				},
				{
					id: 3,
					name: '水果',
					icon: 'https://xianlian.e88u.com/Upload/11/ad/20250912161139_3540.png',
					link: '/pages/category/category'
				},
				{
					id: 4,
					name: '海鲜水产',
					icon: 'https://xianlian.e88u.com/Upload/11/ad/20250912161139_3540.png',
					link: '/pages/category/category'
				},
				{
					id: 5,
					name: '粮油调味',
					icon: 'https://xianlian.e88u.com/Upload/11/ad/20250912161139_3540.png',
					link: '/pages/category/category'
				},
				{
					id: 6,
					name: '乳制品',
					icon: 'https://xianlian.e88u.com/Upload/11/ad/20250912161139_3540.png',
					link: '/pages/category/category'
				},
				{
					id: 7,
					name: '休闲零食',
					icon: 'https://xianlian.e88u.com/Upload/11/ad/20250912161139_3540.png',
					link: '/pages/category/category'
				},
				{
					id: 8,
					name: '酒水饮料',
					icon: 'https://xianlian.e88u.com/Upload/11/ad/20250912161139_3540.png',
					link: '/pages/category/category'
				},
				{
					id: 9,
					name: '冷冻食品',
					icon: 'https://xianlian.e88u.com/Upload/11/ad/20250912161139_3540.png',
					link: '/pages/category/category'
				},
				{
					id: 10,
					name: '更多分类',
					icon: 'https://xianlian.e88u.com/Upload/11/ad/20250912161139_3540.png',
					link: '/pages/category/category'
				}
			],
			// 活动列表数据
			activityList: [
				{
					id: 1,
					name: '限时秒杀',
					image: 'https://xianlian.e88u.com/Upload/11/ad/20250912161139_3540.png',
					description: '每日10点开抢',
					link: '/pages/activity/seckill'
				},
				{
					id: 2,
					name: '新人专享',
					image: 'https://xianlian.e88u.com/Upload/11/ad/20250912161139_3540.png',
					description: '新用户立减20元',
					link: '/pages/activity/newuser'
				},
				{
					id: 3,
					name: '满减优惠',
					image: 'https://xianlian.e88u.com/Upload/11/ad/20250912161139_3540.png',
					description: '满99减10，满199减25',
					link: '/pages/activity/discount'
				},
				{
					id: 4,
					name: '会员专享',
					image: 'https://xianlian.e88u.com/Upload/11/ad/20250912161139_3540.png',
					description: '会员独享特价商品',
					link: '/pages/activity/member'
				}
			],
			// 商品列表数据
			goodsList: waterfallGoodsList,
			topImage: 'https://xianlian.e88u.com/Upload/11/ad/20250912161139_3540.png'
		};
	},
	computed: {
		topStyle() {
			return {
				backgroundImage: `url(${this.topImage})`
			};
		}
	},

	/**
	 * 页面加载时触发
	 */
	onLoad() {
		this.init();
	},

	methods: {
	/**
	 * 初始化页面数据
	 * 数据已在data中定义，这里可以添加其他初始化逻辑
	 */
	init() {
		// 数据已在data中定义，这里可以添加其他初始化逻辑
		console.log('首页初始化完成');
	},

	/**
	 * 处理搜索框点击事件
	 */
	handleSearchClick() {
		console.log('点击搜索框');
		// 跳转到搜索页面
		this.toNav('search/search')
	},

		/**
		 * 处理商品点击事件
		 * @param {Object} item 商品信息
		 */
		handleGoodsClick(item) {
			console.log('点击商品:', item);
			uni.showToast({
				title: `点击了${item.name}`,
				icon: 'none'
			});
			// 这里可以跳转到商品详情页
			// uni.navigateTo({
			//   url: `/pages/goods/detail?id=${item.id}`
			// });
		},

		/**
		 * 处理加载更多事件
		 */
		handleLoadMore() {
			console.log('加载更多商品');
			uni.showToast({
				title: '加载更多商品中...',
				icon: 'loading'
			});

			// 模拟加载更多数据
			setTimeout(() => {
				// 这里可以调用API加载更多商品
				// this.loadMoreGoods();
				uni.showToast({
					title: '已加载更多商品',
					icon: 'success'
				});
			}, 1500);
		},

		/**
		 * 跳转到瀑布流页面
		 */
		goToWaterfall() {
			uni.navigateTo({
				url: '/pages/waterfall/waterfall'
			});
		},

		/**
		 * 跳转到图片测试页面
		 */
		goToImageTest() {
			uni.navigateTo({
				url: '/pages/image-test/image-test'
			});
		}
	}
};
</script>

<style lang="less">
/* 首页容器样式 */
.index-container {
	position: relative;
	z-index: 1;

	.page-head-image {
		width: 100%;
		aspect-ratio: 300 / 247;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.page-head {
		background-size: 100%;
		background-repeat: no-repeat;
		position: sticky;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 1;
		padding: 10rpx @page-row-spacing;
		.JSelectStore-wrap {
			margin-bottom: 20rpx;
		}
		.JSearch-wrap {
			/* 搜索框样式 */
			width: 100%;
		}
	}
	.test-buttons {
		padding: 20rpx;
		display: flex;
		gap: 20rpx;
		justify-content: center;

		.test-btn {
			background: @basecolor;
			color: #fff;
			border: none;
			border-radius: 30rpx;
			padding: 20rpx 30rpx;
			font-size: 26rpx;
			flex: 1;
			max-width: 300rpx;
		}
	}

	/* 商品筛选和列表容器 */
	.goods-section {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
}
</style>
